// components/bar/bar.js
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function setTrendOption(chart, xAxis, series) {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    toolbox: {
      show: false
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLabel: {//坐标轴刻度标签
				show: true,
        rotate: 45
			},
    },
    dataZoom: [
      {
        type: 'slider',
        start: 0,
        startValue: 0, // 从头开始。
        endValue: 7, // 一次性展示6个
        end: 50,
        height: 25,
        brushSelect: false,
        zoomLock: true,
        handleStyle: {
            color: '#ddd'
        }
    }
  ],
    yAxis: {
      type: 'value',
    },
    series: series
  };
  chart.setOption(option);
}
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    xData: {
      type: Array,
      value: []
    },
    yData: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: null,
      lazyLoad: true
    },
    xdata: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
    ydata: [120, 200, 150, 80, 70, 110, 130]
  },
  lifetimes: {
    attached() {
      this.ecDataTrendComponent = this.selectComponent('#mychart-dom-bar');
      this.getTrend()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    getTrend() {
      setTimeout(() => {
        // 初始化完成之后，直接获取后台数据进行绘制canvas
        this.ecDataTrendComponent.init((canvas, width, height, dpr) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          // let xAxis = {
          //   type: 'category',
          //   data: this.data.xdata
          // }
          let xAxis = this.data.xdata
          let series = [
            {
              data: this.data.ydata,
              type: 'bar',
              barMinWidth: 20,
              markLine:{ // 设置平均线
                data:[
                  {
                    type:"average", 
                    name:"平均线",
                    color:"#baf"
                  }
                ]
              },
            }
          ]
          // 将后台的值传递给 setTrendOption 方法
          setTrendOption(chart, xAxis, series);
          // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
          this.ecDataTrendChart = chart;
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });
      }, 0)
    },
  },
  observers: {
    xData(n,o) {
      this.setData({
        xdata: n
      })
      this.getTrend()
    },
    yData(n,o) {
      this.setData({
        ydata: n
      })
      this.getTrend()
    }
  }
})